<template>
	<view class="goods-detail">
		<view>
			<u-navbar
				:is-back="true"
				:border-bottom="false"
				:title-bold="true"
				:title="i18n.Title"
				:background="background"
				title-color="#222222"
				back-icon-color="#222222"
			></u-navbar>
		</view>
		<productConSwiper :imgUrls="goodsitem.slider_image" :videoline="goodsitem.video_link"></productConSwiper>
		<view class="head-box">
			<view class="head-qian">
				￥
				<span>{{ goodsitem.price }}</span>
				{{ i18n.Commission }}:
			</view>
			<view class="head-title">{{ goodsitem.store_name }}</view>
			<view class="head-subtitle">{{ goodsitem.store_info }}</view>
			<view class="head-bottom">
				<text>{{ i18n.Sold }} {{ goodsitem.sales }} {{ goodsitem.unit_name }} | {{ i18n.Stock }} {{ goodsitem.stock }} {{ goodsitem.unit_name }}</text>
				<view>{{ i18n.Pinkage }}</view>
			</view>
		</view>
		<view class="body-box">
			<view class="body-box-list">
				<view class="body-box-list-title">{{ i18n.Service }}</view>
				<view class="body-box-list-text"><text>进口商品 · 正品保障 · 跨境直供 · 保锐区发货 · 包邮</text></view>
			</view>
			<view class="body-box-list">
				<view class="body-box-list-title">{{ i18n.Sendout }}</view>
				<view class="body-box-list-text"><text>24:00前付款，10月20日送达</text></view>
				<view class="img">
					<view class="xian"></view>
					<view class="xian1"></view>
					<view class="">
						<image src="../static/images/detail_import.png" mode=""></image>
						<view class="" style="color: #FD342A; z-index: 5;">美国进口</view>
					</view>
					<view >
						<image src="../static/images/detail_warehouse.png" mode=""></image>
						<view class="" style="color: #FD342A;">广州保税仓1号仓</view>
					</view>
					<view class="">
						<image src="../static/images/detail_adress.png" mode=""></image>
						<view class="" >珠海市</view>
					</view>
				</view>
			</view>
			<view class="body-box-list" style="display: flex; " @click="selecAttr = !selecAttr">
				<view class="body-box-list-title">{{ i18n.Selected }}：</view>
				<view style="flex: 1;"></view>
				<view class="iconfont icon-jiantou"></view>
			</view>
		</view>

		<view class="store-box" @click="goselfsupport" v-if="supplier_id != 0">
			<image src="" mode="widthFix"></image>
			<view class="store-box-head">
				<view class="store-box-title">{{ supplier_info.mer_name }}</view>
				<view class="store-box-subtitle">
					<span>{{ i18n.BrandStore }}</span>
					{{ i18n.Sold }} {{supplier_info.sales}} {{ i18n.Jain }}
				</view>
			</view>
			<view class="store-box-fr">
				{{ i18n.Stroll }}
				<icon class="iconfont icon-jiantou"></icon>
			</view>
		</view>
		<view class="detaail-box">
			<view class="detaail-box-title">{{ i18n.Title }}</view>
			<jyf-parser :html="content.replace(/<br\/>/gi, '')" ref="article" :tag-style="tagStyle"></jyf-parser>
		</view>
		<view style="height: 49px; background-color: ;"></view>
		<view class="footer acea-row row-between-wrapper">
			<navigator url="../supplier_store/index" class="item">
				<image src="../static/images/product_details_shop.png" class="item-png"></image>
				<view>{{ i18n.Shops }}</view>
			</navigator>
			<view @click="couponTap2" class="item">
				<image src="../static/images/product_details_service.png" class="item-png"></image>
				<view>{{ i18n.Livingroom }}</view>
			</view>
			<view class="animated item" hover-class="none" @click="listenerActionSheet">
				<image src="../static/images/product_details_share.png" class="item-png"></image>
				<view>{{ i18n.Share }}</view>
			</view>
			<button class="bnt" @click="addgoods">{{ i18n.Add }}</button>
		</view>
		<u-popup v-model="selecAttr" mode="bottom" border-radius="28" height="400rpx" width="100%">
			<view class="product-window">
				<view class="list">
					<view class="item-img"><image :src="goodsitem.image" mode=""></image></view>
					<view class="item">
						<view class="title">
							<view class="title-head ">
								<view class="name">{{ goodsitem.store_name }}</view>
								<u-icon class="close" name="close" @click="selecAttr = false"></u-icon>
							</view>
							<view class="title-body">
								<view class="sun">
									<view style="margin-right: 20rpx;">
										￥
										<span style="font-size: 36rpx;">{{ goodsitem.price }}</span>
									</view>
									<view style="font-size: 24rpx;">
										{{ i18n.Commission }}:
										<i>{{ item.Commission }}</i>
									</view>
								</view>
								<view class="kucun">{{ i18n.Stock }}：{{ goodsitem.stock }}{{ goodsitem.unit_name }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<block v-if="sharePacket.max && sharePacket.min">
			<shareRedPackets
				:sharePacket="sharePacket"
				@listenerActionSheet="listenerActionSheet"
				@closeChange="closeChange"
				:showAnimate="showAnimate"
				@boxStatus="boxStatus"
			></shareRedPackets>
		</block>
		<!-- 分享按钮 -->
		<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
			<!-- #ifndef MP -->
			<button class="item" hover-class="none" v-if="weixinStatus === true" @click="H5ShareBox = true">
				<view class="iconfont icon-weixin3"></view>
				<view class="">{{ i18n.Friend }}</view>
			</button>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<button class="item" open-type="share" hover-class="none" @click="goFriend">
				<view class="iconfont icon-weixin3"></view>
				<view class="">{{ i18n.Friend }}</view>
			</button>
			<!-- #endif -->
			<button class="item" hover-class="none" @click="goPoster">
				<view class="iconfont icon-haibao"></view>
				<view class="">{{ i18n.Poster }}</view>
			</button>
		</view>
		<view class="mask" v-if="posters" @click="listenerActionClose"></view>
		<!-- 海报展示 -->
		<view class="poster-pop" v-if="posterImageStatus">
			<image src="../static/images/poster-close.png" class="close" @click="posterImageClose"></image>
			<image :src="posterImage"></image>
			<!-- #ifndef H5  -->
			<view class="save-poster" @click="savePosterPath">{{ i18n.SaveTel }}</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="keep">{{ i18n.SaveImg }}</view>
			<!-- #endif -->
		</view>
		<view class="mask" v-if="posterImageStatus"></view>
		<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>
		<!-- 发送给朋友图片 -->
		<view class="share-box" v-if="H5ShareBox"><image src="/static/images/share-info.png" @click="H5ShareBox = false"></image></view>
	</view>
</template>

<script>
const globalData = getApp().globalData;
import { getProductDetail, productadd, open_state, supplierhome, getProductCode } from '@/api/store.js';
import productConSwiper from '@/components/productConSwiper';
import parser from '@/components/jyf-parser/jyf-parser';
import shareRedPackets from '@/components/shareRedPackets';
import { mapGetters } from 'vuex';
export default {
	computed: {
		i18n() {
			return globalData.$t('goods_detail2');
		},
		...mapGetters(['isLogin', 'uid'])
	},
	components: {
		productConSwiper,
		shareRedPackets,
		'jyf-parser': parser
	},
	data() {
		return {
			weixinStatus: false,
			H5ShareBox: false, //公众号分享图片
			posters: false,
			actionSheetHidden: true,
			posterImageStatus: false,
			storeImage: '', //海报产品图
			PromotionCode: '', //二维码图片
			canvasStatus: false, //海报绘图标签
			posterImage: '', //海报路径
			posterbackgd: '/static/images/posterbackgd.png',
			source: '',
			showAnimate: true,
			sharePacket: {
				isState: true //默认不显示
			},
			background: {
				backgroundColor: '#ffffff'
			},
			selecAttr: false,
			option: 0,
			goodsid: '', //商品id
			supplier_id: '', //供应商id
			goodsstoreid: '', //商品店家ID
			goodsitem: [], //商品列表
			supplier_info: [], //供应商信息
			attr: [],
			content: '',
			tagStyle: {
				img: 'width:100%;'
			}
		};
	},
	methods: {
		/**
		 * 生成海报
		 */
		goPoster: function() {
			let that = this;
			that.posters = false;
			that.$set(that, 'canvasStatus', true);
			let arr2 = [that.posterbackgd, that.storeImage, that.PromotionCode];
			// // #ifndef H5
			if (that.isDown)
				return that.$util.Tips({
					title: that.i18n.Dwnloading
				});
			// // #endif
			uni.getImageInfo({
				src: that.PromotionCode,
				fail: function(res) {
					// #ifdef H5
					return that.$util.Tips({
						title: res
					});
					// #endif
					// #ifdef MP
					console.log(res, 'res');
					return that.$util.Tips({
						title: that.i18n.QRcode
					});
					// #endif
				},
				success() {
					if (arr2[2] == '') {
						//海报二维码不存在则从新下载
						// // #ifndef H5
						that.downloadFilePromotionCode(function(msgPromotionCode) {
							arr2[2] = msgPromotionCode;
							if (arr2[2] == '')
								return that.$util.Tips({
									title: that.i18n.PosterQRcode
								});
							that.$util.PosterCanvas(arr2, that.storeInfo.store_name, that.storeInfo.price, function(tempFilePath) {
								that.$set(that, 'posterImage', tempFilePath);
								that.$set(that, 'posterImageStatus', true);
								that.$set(that, 'canvasStatus', false);
								that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
							});
						});
						// // #endif
					} else {
						//生成推广海报
						that.$util.PosterCanvas(arr2, that.storeInfo.store_name, that.storeInfo.price, function(tempFilePath) {
							that.$set(that, 'posterImage', tempFilePath);
							that.$set(that, 'posterImageStatus', true);
							that.$set(that, 'canvasStatus', false);
							that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
						});
					}
				}
			});
		},

		/*
		 * 保存到手机相册
		 */
		// #ifdef MP
		savePosterPath: function() {
			let that = this;
			uni.getSetting({
				success(res) {
					if (!res.authSetting['scope.writePhotosAlbum']) {
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								uni.saveImageToPhotosAlbum({
									filePath: that.posterImage,
									success: function(res) {
										that.posterImageClose();
										that.$util.Tips({
											title: that.i18n.Succeed,
											icon: 'success'
										});
									},
									fail: function(res) {
										that.$util.Tips({
											title: that.i18n.Fail
										});
									}
								});
							}
						});
					} else {
						uni.saveImageToPhotosAlbum({
							filePath: that.posterImage,
							success: function(res) {
								that.posterImageClose();
								that.$util.Tips({
									title: that.i18n.Succeed,
									icon: 'success'
								});
							},
							fail: function(res) {
								that.$util.Tips({
									title: that.i18n.Fail
								});
							}
						});
					}
				}
			});
		},
		// #endif
		//#ifdef H5
		ShareInfo() {
			let data = this.storeInfo;
			let href = location.href;
			if (this.$wechat.isWeixin()) {
				getUserInfo().then(res => {
					href = href.indexOf('?') === -1 ? href + '?spread=' + res.data.uid : href + '&spread=' + res.data.uid;

					let configAppMessage = {
						desc: data.store_info,
						title: data.store_name,
						link: href,
						imgUrl: data.image
					};

					this.$wechat
						.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline'], configAppMessage)
						.then(res => {
							console.log(res, '=============================>>WXAPI');
						})
						.catch(err => {
							console.log(err);
						});
				});
			}
		},
		//#endif
		// 小程序关闭分享弹窗；
		goFriend: function() {
			this.posters = false;
		},
		listenerActionSheet: function() {
			this.posters = true;
			console.log(this.posters);
			// #ifdef H5
			if (this.$wechat.isWeixin() === true) {
				this.weixinStatus = true;
			}
			this.downloadFilePromotionCode();
			// #endif
		},
		// 分享关闭
		listenerActionClose: function() {
			this.posters = false;
		},
		//隐藏海报
		posterImageClose: function() {
			this.posterImageStatus = false;
		},
		/*
		 * 获取用户信息
		 */
		getUserInfo: function() {
			let that = this;
			that.$set(that.sharePacket, 'isState', that.sharePacket.priceName != 0 ? false : true);
			getUserInfo().then(res => {
				// that.$set(that, 'uid', res.data.uid);
			});
		},
		closeChange: function() {
			this.$set(this.sharePacket, 'isState', true);
		},
		/**
		 * 获取产品分销二维码
		 * @param function successFn 下载完成回调
		 *
		 */
		downloadFilePromotionCode: function(successFn) {
			let that = this;
			getProductCode(that.id)
				.then(res => {
					uni.downloadFile({
						// #ifdef MP
						url: that.setDomain(res.data.url),
						// #endif
						// #ifdef H5
						url: res.data.url,
						// #endif
						success: function(res) {
							that.$set(that, 'isDown', false);
							if (typeof successFn == 'function') successFn && successFn(res.tempFilePath);
							else that.$set(that, 'PromotionCode', res.tempFilePath);
						},
						fail: function() {
							that.$set(that, 'isDown', false);
							that.$set(that, 'PromotionCode', '');
						}
					});
				})
				.catch(err => {
					that.$set(that, 'isDown', false);
					that.$set(that, 'PromotionCode', '');
				});
		},
		couponTap2: function() {
			//跳转到客服页面
			let that = this;
			uni.navigateTo({
				url: `/pages/chat/customer_list/chat?mer_id=${that.goodsstoreid}&productId=${that.goodsid}`
			});
		},
		goselfsupport: function() {
			//跳转到自营
			uni.navigateTo({
				url: `/pages/store/supplier_home/index?supplierid=${this.supplier_id}`
			});
		},
		sumfun: function() {
			//总数失去焦点时
			if (this.sum == 0) {
				this.sum = 1;
			}
		},
		minus: function() {
			//--加入店铺数量
			if (this.sum == 1) {
				return false;
			}
			this.sum--;
		},
		addgoods: function() {
			//添加商品
			let that = this;
			let id = { product_id: this.goodsid };
			productadd(id)
				.then(res => {
					if (res.status === 200) {
						return that.$util.Tips({
							title: res.message
						});
					}
				})
				.catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
		},
		getdetail: function() {
			//获得商品
			let that = this;
			getProductDetail(this.goodsid).then(res => {
				console.log(res);
				this.goodsitem = res.data;
				this.attr = res.data.merchant;
				this.goodsstoreid = res.data.mer_id;
				this.content = res.data.content.content;
				that.$set(that, 'productValue', res.data.sku);
				supplierhome({ id: res.data.supplier_id })
					.then(res => {
						that.supplier_info = res.data;
					})
					.catch();
			});
		},
		viewstatus: function() {
			//查看开店状态
			let that = this;
			open_state()
				.then(res => {
					if (res.status == 200) {
						switch (res.data.open_state) {
							case 0:
								uni.redirectTo({
									url: '/pages/store/privatestop/index'
								});
								break;
							case 1:
								uni.redirectTo({
									url: '/pages/store/privatestop/index'
								});
								break;
							case 3:
								uni.redirectTo({
									url: '/pages/store/store_type/index'
								});
								break;
						}
					}
				})
				.catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
		},
		tt: function() {
			console.log(this.supplier_id);
		}
	},
	onLoad(options) {
		console.log(options);
		uni.setNavigationBarTitle({
			title: this.i18n.Title
		});
		this.goodsid = options.goodsid; //商品id
		this.storeid = options.storeid; //店铺id
		this.supplier_id = options.supplier_id; //供应商id
		this.viewstatus(); //开店状态
		this.getdetail(); //获得商品
		this.tt();
	}
};
</script>

<style lang="scss" scoped>
.product-window {
	padding: 30rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 400rpx;
	width: 100%;
	background: #ffffff;
	border-radius: 20rpx 20rpx 0px 0px;
	.list {
		display: flex;
		flex-wrap: nowrap;
		.item-img {
			height: 190rpx;
			width: 190rpx;
			margin-right: 20rpx;
			background: #ffffff;
			border-radius: 8rpx;
			overflow: hidden;
			image {
				display: inline-block;
				height: 100%;
				width: 100%;
			}
		}
		.item {
			width: 524rpx;
			.title {
				.title-head {
					display: flex;
					justify-content: space-between;
					.name {
						margin-bottom: 40rpx;
						height: 80rpx;
						font-size: 28rpx;
						font-weight: bold;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.close {
						margin-left: 60rpx;
						height: 30rpx;
						display: flex;
						font-size: 24rpx;
						color: #bdbdbd;
					}
				}
				.title-body {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					.sun {
						display: flex;
						flex-wrap: nowrap;
						align-items: flex-end;
						color: #fd342a;
					}
					.kucun {
						font-size: 24rpx;
						color: #999999;
						font-weight: 400;
						padding-top: 15px;
					}
				}
			}
			.list-Commission {
				display: flex;
				align-items: flex-end;
				font-weight: 400;
				color: #fd342a;
				font-size: 24rpx;
				i {
					margin-left: 10rpx;
					font-size: 34rpx;
					font-weight: 400;
					color: #fd342a;
				}
			}
		}
		.su {
			font-size: 28rpx;
			color: #999999;
			margin: 30rpx 0 20rpx 0;
		}
		.option {
			font-size: 24rpx;
			font-weight: 400;
			color: #222222;
			height: 160rpx;
			span {
				margin: 0 20rpx 20rpx 0;
				padding: 10rpx 20rpx;
				border: 2rpx solid #bdbdbd;
				display: inline-block;
			}
			.optionyue {
				border: 2rpx solid #fd342a;
				background-color: #fd342a;
				color: #ffffff;
			}
		}
		.quantity {
			display: flex;
			.box {
				width: 84rpx;
				height: 54rpx;
				background: #ffffff;
				border: 2rpx solid #a0a0a0;
				text-align: center;
				line-height: 54rpx;
				input {
					height: 54rpx;
					line-height: 54rpx;
				}
			}
			.minus {
				width: 84rpx;
				height: 54rpx;
				border: 2rpx solid #e3e3e3;
				background: #ffffff;
				text-align: center;
				line-height: 25px;
				text-align: center;
				color: #e3e3e3;
			}
		}
	}
}
.head-box {
	padding: 30rpx;
	background-color: #ffffff;
	.head-qian {
		margin-bottom: 10rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #fd342a;
		span {
			margin-right: 30rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #fd342a;
		}
	}
	.head-title {
		height: 96rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 48rpx;
		color: #222222;
	}
	.head-subtitle {
		height: 88rpx;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 88rpx;
		border-bottom: 1rpx solid #eaeaea;
		color: #666666;
	}
	.head-bottom {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 37rpx;
		color: #999999;
	}
}
.body-box {
	overflow: hidden;
	margin: 20rpx 0;
	padding: 0 30rpx;
	background-color: #ffffff;
	font-size: 28rpx;
	font-weight: 400;
	color: #999999;
	.body-box-list {
		overflow: hidden;
		padding: 20rpx 0;
		.body-box-list-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
			margin-bottom: 12rpx;
		}
		.body-box-list-text {
			font-size: 28rpx;
			font-weight: 500;
			color: #222222;
		}
		.img {
			position: relative;
			margin-top: 20rpx;
			display: flex;
			view {
				flex: 1;
				display: flex;
				flex-direction:column ;
				justify-content: center;
				margin: 0 auto;
			}
			image {
				z-index: 9;
				margin: 0 auto;
				display: block;
				display: flex;
				width: 38rpx;
				height: 38rpx;
			}
				
			.xian{
				position: absolute;
				left: 128rpx;
				top: 16rpx;
				height: 4rpx;
				width: 231rpx;
				background-color: #FD342A;
			}
			.xian1{
				position: absolute;
				left: 351rpx;
				top: 16rpx;
				height: 4rpx;
				width: 231rpx;
				background-color: #BDBDBD;
			}
		}
	}
}
.store-box {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 20rpx;
	padding: 0 30rpx;
	height: 160rpx;
	background-color: #ffffff;
	image {
		width: 100rpx;
		height: 100rpx;
		background: #999999;
		border: 1px solid #eaeaea;
		border-radius: 50%;
	}
	.store-box-head {
		flex: 1;
		padding-left: 24rpx;
		.store-box-title {
			padding-bottom: 24rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
		}
		.store-box-subtitle {
			font-size: 24rpx;
			font-weight: 400;
			color: #666666;
			span {
				display: inline-block;
				margin-right: 8rpx;
				width: 76rpx;
				height: 28rpx;
				background-color: #fd342a;
				color: #ffffff;
				border-radius: 14rpx;
				font-size: 18rpx;
				text-align: center;
			}
		}
	}
	.store-box-fr {
		font-size: 28rpx;
		color: #999999;
		icon {
			margin-left: 8rpx;
		}
	}
}
.detaail-box {
	.detaail-box-title {
		height: 108rpx;
		background-color: #ffffff;
		font-size: 34rpx;
		font-weight: bold;
		color: #222222;
		text-align: center;
		line-height: 108rpx;
	}
	image {
		width: 100%;
	}
}
.footer {
	z-index: 999999999999999 !important;
	padding: 0 20rpx 0 30rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
	height: 100rpx;
	background-color: #fff;
	z-index: 277;
	border-top: 1rpx solid #f0f0f0;
	.item {
		font-size: 20rpx;
		font-weight: 400;
		color: #666666;
		.item-png {
			height: 36rpx;
			width: 36rpx;
		}
	}
	.bnt {
		line-height: 70rpx;
		width: 430rpx;
		height: 70rpx;
		background: #fd342a;
		border-radius: 40rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 400;
	}
}
.generate-posters {
	width: 100%;
	height: 170rpx;
	background-color: #fff;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99999999999999999999999999999999;
	transform: translate3d(0, 100%, 0);
	transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	border-top: 1rpx solid #eee;
}

.generate-posters.on {
	transform: translate3d(0, 0, 0);
}

.generate-posters .item {
	flex: 50%;
	text-align: center;
	font-size: 30rpx;
}

.generate-posters .item .iconfont {
	font-size: 80rpx;
	color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
	color: #5391f1;
}
.mask {
	z-index: 300 !important;
}
.poster-pop {
	width: 450rpx;
	height: 714rpx;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	z-index: 399;
	top: 50%;
	margin-top: -357rpx;
}

.poster-pop image {
	width: 100%;
	height: 100%;
	display: block;
}

.poster-pop .close {
	width: 46rpx;
	height: 75rpx;
	position: fixed;
	right: 0;
	top: -73rpx;
	display: block;
}

.poster-pop .save-poster {
	background-color: #df2d0a;
	font-size: ：22rpx;
	color: #fff;
	text-align: center;
	height: 76rpx;
	line-height: 76rpx;
	width: 100%;
}

.poster-pop .keep {
	color: #fff;
	text-align: center;
	font-size: 25rpx;
	margin-top: 10rpx;
}
.canvas {
	z-index: 300;
	width: 750px;
	height: 1190px;
}
.share-box {
	z-index: 1000;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	image {
		width: 100%;
		height: 100%;
	}
}
</style>
